<template>
  <el-container>
    <el-header style="background-color: #606266; height: 100px"
      ><el-row>
        <el-col :span="22"
          ><div class="sys-name">
            <a href="/index" style="color: #fff">小区管理系统</a>
          </div></el-col
        >
        <el-col :span="2"
          ><el-button type="success" plain @click="loginout"
            >退出登陆</el-button
          ></el-col
        ></el-row
      ></el-header
    >
    <div class="mainNavigation">
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#303133"
            text-color="#fff"
            unique-opened
            active-text-color="#ffd04b"
          >
            <el-submenu
              v-for="route in menuList"
              :index="route.url"
              :key="route.url"
            >
              <!--一级菜单模板区域-->
              <template slot="title">
                <!--图标-->
                <i class="el-icon-set-up"></i>
                <!--文本-->
                <span>{{ route.name }}</span>
              </template>
              <!--二级菜单-->
              <el-menu-item
                v-for="menu in route.chie"
                :index="menu.url"
                :key="menu.url"
              >
                <!--图标-->
                <!-- <i :class="menu.meta.icon"></i> -->
                <!--文本-->
                <router-link :to="menu.url"
                  ><span style="color: #e6a23c">{{
                    menu.name
                  }}</span></router-link
                >
              </el-menu-item>
            </el-submenu>
          </el-menu></el-aside
        >
        <el-main style="height: 600px; flex-grow: 1">
          <el-row :gutter="24">
            <el-col :span="24" @open="open()"
              ><div>
                <router-view></router-view>
                <div id="pieReport" style="float:left;width: 600px; height: 400px"></div>
                <div
                  id="chartbox"
                  style="float:left;width: 600px; height: 400px"
                ></div></div
            ></el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      charts: "",
      datas: [],
      parks:[],
      menuList: JSON.parse(window.sessionStorage.getItem("menuInfo")),
      isCollapse: false,
      activePath: "",
      activePath1: "",
      menuListForm: {
        pageSize: 1,
        pageNum: -1,
      },
      rid: 1,
    };
  },
  created() {
    console.log("页面路由对象");
    console.log(this.$router);
  },
  methods: {
    open() {
      setTimeout(() => {
        this.drawLine(); // 执行echarts画图方法
      }, 0);
    },
    loginout() {
      this.$store.dispatch("changeLogin");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    //页面跳转
    changeUrl(url) {
      this.$store.dispatch("changeUrl", url);
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("pieReport"));
      let options = {
        title: {
          top: 50,
          text: "房屋状况统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 100,
          orient: "vertical",
          left: "left",
          data: this.datas,
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            avoidLabelOverlap: false,
            data: this.datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
      window.addEventListener("resize", function () {myChart.resize();});
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById("chartbox"));
      let options = {
        title: {
          top: 50,
          text: "车位状况统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 100,
          orient: "vertical",
          left: "right",
          data: this.parks,
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            avoidLabelOverlap: false,
            data: this.parks,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
      window.addEventListener("resize", function () {myChart.resize();});
    },
  },
  watch: {
    datas: {
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
    parks: {
      handler: function () {
        this.drawPie();
      },
      deep: true,
    },
  },
  created() {
    //参考：https://blog.csdn.net/guzhao593/article/details/81435342
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
  created() {
    let url = "fangwu/statistics";
    this.$axios.get(url).then((resp) => {
      if (resp.data.success) {
        this.datas.length = 0; //清空数组
        for (let i = 0; i < resp.data.result.length; i++) {
          this.datas.push(resp.data.result[i]);
          console.log(this.datas);
        }
      }
    });
    let url2 = "fangwu/spaceStat";
    this.$axios.get(url2).then((resp) => {
      if (resp.data.success) {
        this.parks.length = 0; //清空数组
        for (let i = 0; i < resp.data.result.length; i++) {
          this.parks.push(resp.data.result[i]);
          console.log(this.parks);
        }
      }
    });
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 620px;
}
.el-aside {
  height: 100vh;
  background-color: #222f3e;
  line-height: 200px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 90px;
  height: 100%;
  margin-top: -50px;
}
.sys-name {
  font-size: 20px;
  margin-left: 10px;
}
.el-footer {
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 45px;
}
.mainNavigation {
  position: fixed;
  height: 100%;
  width: 100%;
}
</style>
